<template>
	<div id="shopcar" class="_page">
		<header-back title="购物车"></header-back>
		<div class="shopcarbox">
			<div class="car" v-if="getCarListLength == 0">
				<img src="../../assets/image/11232666.png" alt="" class="width_img" @click="$router.push('./home')">
			</div>
			<div class="carList" v-else>
				<ul class="carul">
					<li v-for="(item , index) in getCarList">
						<img v-lazy="item.banner[0].src" alt="" class="carimg">
						<div class="carprice">
							<p class="fs-14">{{ item.title }}</p>
							<p class="fs-14">{{ item.money | money }}</p>
							<div class="amount">
								<span @click="Sitemjan(item)">-</span>
								<span>{{ item.num }}</span>
								<span @click="Sitemjia(item)">+</span>
							</div>
						</div>
						<div class="cardelete" @click="deleteShop(item)"><span class="iconfont icon-del"></span></div>
					</li>
				</ul>
			</div>
			<div class="lenovo">
				<img src="../../assets/image/e95ade2750a7fde92369b416c7d3176d.jpg" alt="" class="width_img">
				<ul>
					<li v-for="item in lenovolist" class="mb-10" @click="linkToPage('04')">
						<img v-lazy="item.src" alt="" class="width_img">
						<div class="phoprod_tex">
							<p class="pl-10 fs-14">{{item.title}}</p>
							<p class="pl-10 fs-12">{{item.con}}</p>
							<p class="pl-10 fs-16">{{item.money | money}}</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		<app-footer v-if="getCarListLength == 0"></app-footer>

		<div class="carfooter" v-else>
			<p class="fl addpricecss"><span class="fs-14">共<span>{{ getCarlistAdnum }}</span>件 金额</span><br>{{ getCarlistPrice | money }}</p>
			<div class="addcar fr" @click="$router.push('/interview')">
				<span>结账</span>
			</div>
		</div>

	</div>
</template>

<script>
import HeaderBack from '../../components/header-back/header-back'
import Footer from '../Footer/Footer'
export default {
	name:"shopcar",
	data(){
		return{
			lenovolist:[]
		}
	},
	watch:{

	},
	computed:{
		getCarList(){//返回购物车商品数组
			return this.$store.state.shopCarlist
		},
		getCarListLength(){//返回购物车商品数组长度
			return this.$store.getters.getCarList
		},
		getCarlistPrice(){//返回购物车物品总价钱
			return this.$store.getters.getCarlistPrice
		},
		getCarlistAdnum(){//返回购物车总件数
			return this.$store.getters.getCarlistAdnum
		}
	},
	components :{
		"app-footer" : Footer,
		"header-back" : HeaderBack
	},
	methods:{
		deleteShop(Sitem){
			this.$store.commit('deleteShopCar' , Sitem)
		},
		Sitemjia(Sitem){
			this.$store.commit('Sitemjia' , Sitem)
		},
		Sitemjan(Sitem){
			this.$store.commit('Sitemjan' , Sitem)
		}
	},
	mounted(){
		this.$http.get("../../../mishop/static/itemJson/lenovo.json").then(res => {
			//console.log(res.body)
			this.lenovolist = res.body
		})
	}
}
</script>

<style>
	.shopcarbox{
		position: absolute;
		overflow-y: auto;
		top: 50px;
		bottom: 55px;
	}
	.lenovo ul{
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
		}
	.lenovo ul li{
		width:49.5%;
	}
	.carul li {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		padding: 0 15px 15px;
		margin : 15px 0;
		border-bottom: 1px solid #eee
	}
	.carimg{
		width: 100px;
		height: 88px;
	}
	.carprice{
		line-height: 25px;
		width: 50%;
	}
	.amount{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		width: 90px;
		color: #666;
		text-align: center;
		border: 1px solid #eee;
	}
	.amount span:nth-child(1){
		padding: 0 10px;
		background-color: #FAFAFA;
	}
	.amount span:nth-child(3){
		padding: 0 10px;
		background-color: #FAFAFA;
	}
	.cardelete{
		line-height: 88px;
		font-size: 21px;
		color: #CFCFCF;
	}
	.addpricecss{
		height: 56px;
		width: 40%;
		text-align: center;
		color: #FF5722;
		font-weight: bold;
	}
</style>